<template>
	<view class="container">
		<view class="content">
			<view class="content-top">
				<view class="content-top-one d-rn d-ac d-jb" @click="handlegoType">
					<text>{{ $t('vacation_type') }}</text>
					<text v-if="typeName">{{ typeName }}</text>
					<text v-else style="padding-right: 10rpx; box-sizing: border-box">{{ $t('select_vacation_type') }}</text>
				</view>
				<view class="content-top-one d-rn d-ac d-jb">
					<text>{{ $t('start_time') }}</text>
					<view class="d-rn d-ac">
						<view class="content-top-one-right d-rn d-ac" style="margin-right: 40rpx"
							@click.stop="handleOpenTime">
							<text v-if="start.leaveStartDate">{{
					start.leaveStartDate
				}}</text>
							<text v-else>{{ $t('please_select_start_time') }}</text>
							<!-- <image src="../../static/img/right.png" mode=""></image> -->
						</view>
						<!-- <view class="content-top-one-right d-rn d-ac" @click.stop="handleOpenTime">
							<text>{{startTimeTime}}</text>
						</view> -->
						<picker @change="bindPickerChange" :range="startTimeTimeList" range-key="dictLabel"
							class="picker">
							<view class="d-rn d-ac d-jc">
								<view class="picker-con d-rn d-ac">
									<view class="uni-input one-txt-cut" v-if="dayStartHalf">{{ dayStartHalf }}
									</view>
									<view class="uni-input one-txt-cut" v-else>{{ $t('please_select_time_period') }}</view>
								</view>
							</view>
						</picker>
					</view>
				</view>
				<view class="content-top-one d-rn d-ac d-jb">
					<text>{{ $t('end_time') }}</text>
					<!-- <view class="content-top-one-right d-rn d-ac" @click.stop="handleOpenTimes">
						<text>{{end.endTime}}</text>
						<image src="../../static/img/right.png" mode=""></image>
					</view> -->
					<view class="d-rn d-ac">
						<view class="content-top-one-right d-rn d-ac" style="margin-right: 40rpx"
							@click.stop="handleOpenTimes">
							<text v-if="start.leaveEndDate">{{ start.leaveEndDate }}</text>
							<text v-else>{{$t('please_select_end_time')}}</text>
							<!-- <image src="../../static/img/right.png" mode=""></image> -->
						</view>
						<!-- <view class="content-top-one-right d-rn d-ac" @click.stop="handleOpenTime">
							<text>{{startTimeTime}}</text>
						</view> -->
						<picker @change="bindPickerChanges" :range="startTimeTimeList" range-key="dictLabel"
							class="picker">
							<view class="d-rn d-ac d-jc">
								<view class="picker-con d-rn d-ac">
									<view class="uni-input one-txt-cut" v-if="dayEndHalf">{{ dayEndHalf }}
									</view>
									<view class="uni-input one-txt-cut" v-else>{{$t('please_select_time_period')}}</view>
								</view>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<!-- <view class="tips">
				<text>请假{{ LeaveDayForm.leaveDays || 0 }}天（共{{
            LeaveDayForm.totalVacationDuration == -1
              ? "--"
              : LeaveDayForm.totalVacationDuration || 0
          }}天，余{{
            LeaveDayForm.remaindeLeaveDays == -1
              ? "--"
              : LeaveDayForm.remaindeLeaveDays || 0
          }}天，可预支{{
            LeaveDayForm.advanceVacationDuration == -1
              ? "--"
              : LeaveDayForm.advanceVacationDuration || 0
          }}天）</text>
			</view> -->
			<view class="tips">
				<text>{{$t('leave1')}}{{ LeaveDayForm.leaveDays || 0 }}{{$t('days')}}（{{$t('due')}}{{
					(LeaveDayForm.totalVacationDuration || 0) + (LeaveDayForm.modifyDays || 0)
				}}天，{{$t('taken')}}{{ LeaveDayForm.isLeaveDays || 0 }}{{$t('balance')}}{{
					(LeaveDayForm.totalVacationDuration || 0) + (LeaveDayForm.modifyDays || 0) -
					(LeaveDayForm.isLeaveDays
						|| 0)
				}}天）</text>
				<!-- ，可预支{{
            LeaveDayForm.advanceVacationDuration == -1
              ? "--"
              : LeaveDayForm.advanceVacationDuration || 0
          }}天） -->
			</view>
			<view class="content-min">
				<view class="content-min-title">
					<text>{{$t('leave_reason2')}}</text>
				</view>
				<view class="content-min-text">
					<textarea name="" id="" cols="30" rows="10" :placeholder="$t('leave_reason_placeholder')" placeholder-style="color:#CCCCCC;"
						v-model="start.content"></textarea>
				</view>
				<view class="content-min-upload" @click="upLoadImage">
					<image :src="start.pic ? start.pic : '../../static/img/upload.png'" mode=""></image>
				</view>
			</view>
			<view class="content-bto">
				<view class="content-bto-title">
					<text>{{ $t('approval_flow') }}</text>
				</view>
				<view class="">
					<u-steps dot direction="column" :current="current" class="stepbox">
						<u-steps-item v-for="(item, index) in stepList" :key="index">
							<view class="stepbox-big d-rn" slot="desc">
								<view>
									<image :src="baseUrl + item.avatar" mode=""></image>
								</view>
								<view class="stepbox-big-word d-cw">
									<text>{{ item.approveName }} <text>{{ item.zhiweu }}</text>
									</text>
									<!-- <text>{{!item.sts?'审批中':item.sts==1?'已同意':'已驳回'}}</text> -->
								</view>
							</view>
						</u-steps-item>
					</u-steps>
				</view>
			</view>
		</view>
		<view class="footer d-rn d-ac d-jc" @click="$u.debounce(handleSubmit, 500)">
			<text class="d-rn d-ac d-jc">{{ $t('submit') }}</text>
		</view>

		<view class="">
			<u-datetime-picker :show="startTimests" v-model="value" mode="date" @cancel="handleCancel"
				@confirm="handleChooseTime"></u-datetime-picker>
			<u-datetime-picker :show="endTimests" v-model="value" :minDate="minDate" mode="date" @cancel="handleCancels"
				@confirm="handleChooseTimes"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
var _self;
import {
	applicationgetAll,
	applyLeave,
	personHolidaysNum,
	getApprovalName,
	computeLeaveDays,
} from "../../api/index.js";
import {
	getDictionary
} from "../../api/common.js";

import config from "@/request/config.js";

export default {
	data() {
		return {
			startTimests: false,
			endTimests: false,
			start: {
				leaveStartDate: "",
				leaveStartDateType: "",
				leaveEndDate: "",
				leaveEndDateType: "",
			},
			dayStartHalf: "",
			dayEndHalf: "",
			value: Number(new Date()),
			current: 0,
			stepList: [{
				icon: "",
				name: "",
				zhiweu: "",
				sts: "",
			},],
			hostList: [],
			typeName: "",
			startTimeTimeList: [],
			redWord: {},
			baseUrl: config.baseUrl,
			LeaveDayForm: {},
			minDate: null,
			minimumLeaveUnit: null,
		};
	},
	onLoad(options) {
		_self = this;
		if (options && options.data != "null") {
			_self.start.type = JSON.parse(options.data).id;
			_self.typeName = JSON.parse(options.data).name;
			this.minimumLeaveUnit = JSON.parse(options.data).minimumLeaveUnit;
		}
	},
	onShow() {
		_self.getgetApprovalName();
		this.getDictionary();
	},
	methods: {
		// 获取审批流程
		getgetApprovalName() {
			getApprovalName({
				incident: 1,
			}).then((res) => {
				if (res.code == 200) {
					_self.stepList = res.data;
				}
			});
		},
		//假期日期类别
		getDictionary() {
			if (this.minimumLeaveUnit == 1) {
				this.startTimeTimeList = [{
					dictLabel: this.$t('full_day'),
					dictValue: "1",
				},];
				return;
			}
			getDictionary("vacation_date_type").then((res) => {
				if (res.code == 200) {
					this.startTimeTimeList = res.data;
				}
			});
		},
		handleOpenTime() {
			_self.startTimests = true;
		},
		handleOpenTimes() {
			_self.endTimests = true;
		},
		handleChooseTime(e) {
			this.minDate = e.value;
			_self.startTimests = false;
			_self.start.leaveStartDate = _self.$commonFun.timestampToTimeB(e.value);
			if (
				_self.start.leaveStartDate &&
				_self.start.leaveEndDate &&
				_self.start.leaveEndDateType &&
				_self.start.leaveStartDateType
			) {
				this.getComputeLeaveDays();
			}
		},
		getComputeLeaveDays() {
			let data = {
				vacationId: _self.start.type,
				leaveEndDate: _self.start.leaveEndDate,
				leaveEndDateType: _self.start.leaveEndDateType,
				leaveStartDate: _self.start.leaveStartDate,
				leaveStartDateType: _self.start.leaveStartDateType,
			};
			computeLeaveDays(data).then((res) => {
				this.LeaveDayForm = res.data;
			});
		},
		handleCancel() {
			_self.startTimests = false;
		},
		handleChooseTimes(e) {
			_self.endTimests = false;
			_self.start.leaveEndDate = _self.$commonFun.timestampToTimeB(e.value);
			if (
				_self.start.leaveStartDate &&
				_self.start.leaveEndDate &&
				_self.start.leaveEndDateType &&
				_self.start.leaveStartDateType
			) {
				this.getComputeLeaveDays();
			}
		},
		handleCancels() {
			_self.endTimests = false;
		},
		bindPickerChange(e) {
			_self.start.leaveStartDateType =
				_self.startTimeTimeList[e.detail.value].dictValue;
			_self.dayStartHalf = _self.startTimeTimeList[e.detail.value].dictLabel;
			if (
				_self.start.leaveStartDate &&
				_self.start.leaveEndDate &&
				_self.start.leaveEndDateType &&
				_self.start.leaveStartDateType
			) {
				this.getComputeLeaveDays();
			}
		},
		bindPickerChanges(e) {
			_self.start.leaveEndDateType =
				_self.startTimeTimeList[e.detail.value].dictValue;
			_self.dayEndHalf = _self.startTimeTimeList[e.detail.value].dictLabel;
			if (
				_self.start.leaveStartDate &&
				_self.start.leaveEndDate &&
				_self.start.leaveEndDateType &&
				_self.start.leaveStartDateType
			) {
				this.getComputeLeaveDays();
			}
		},
		handlegoType() {
			_self.$commonFun.goUrl(1, "../holidayType/index");
		},

		getapplicationgetAll(start) {
			applicationgetAll({
				userId: JSON.parse(uni.getStorageSync("loginInfo")).userid,
				start: start,
			}).then((res) => {
				// if(res.code == 200){
				// }
			});
		},

		// 上传图片
		upLoadImage() {
			let upInfo = {
				baseUrl: this.baseUrl + "/common/upload",
				baseName: "file",
				token: uni.getStorageSync("AUTHORIZATION"),
			};
			_self.$commonFun.handleUpImg(1, upInfo, 1).then((res) => {
				// 把res中http://替换成https://
				res = res.replace("http://", "https://");
				this.$nextTick(() => {
					_self.start.pic = res;
					this.$forceUpdate();
				});
			});
		},

		handleSubmit() {
			if (!_self.start.type) {
				uni.showToast({
					title: this.$t('please_select_vacation_type'),
					icon: "none",
				});
				return;
			}
			if (!_self.start.leaveEndDate) {
				uni.showToast({
					title: this.$t('please_select_end_time'),
					icon: "none",
				});
				return;
			}
			if (!_self.start.leaveEndDateType) {
				uni.showToast({
					title: this.$t('please_select_end_time_period'),
					icon: "none",
				});
				return;
			}
			if (!_self.start.leaveStartDate) {
				uni.showToast({
					title: this.$t('please_select_start_time'),
					icon: "none",
				});
				return;
			}
			if (!_self.start.leaveStartDateType) {
				uni.showToast({
					title: this.$t('please_select_start_time_period'),
					icon: "none",
				});
				return;
			}
			let data = {
				vacationId: _self.start.type,
				leaveEndDate: _self.start.leaveEndDate,
				leaveEndDateType: _self.start.leaveEndDateType,
				leaveStartDate: _self.start.leaveStartDate,
				leaveStartDateType: _self.start.leaveStartDateType,
				leaveReason: this.start.content,
				leaveFile: this.start.pic,
			};
			uni.showModal({
				title: this.$t('prompt'),
				content: this.$t('submit_confirm'),
				cancelColor: '#353535',
				confirmColor: '#215AA0',
				cancelText: this.$t('cancel'),
				// showCancel: false,
				confirmText: this.$t('picker_confirm'),
				success: function (res) {
					if (res.confirm) {
						applyLeave(data).then((res) => {
							if (res.code == 200) {
								_self.$commonFun.showTips(res.msg);
								setTimeout(function () {
									_self.$commonFun.goUrl(3, "../index/index");
								}, 2000);
							}
						});
					} else if (res.cancel) { }
				}
			})

		},
	},
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.container {
	width: 100%;

	.content {
		width: 100%;

		&-top {
			background-color: #ffffff;

			.uni-input {
				font-size: 28rpx;
				color: #6c6c6c;
			}

			&-one {
				padding: 30rpx 24rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #eeeeee;

				text {
					font-size: 28rpx;
					color: #6c6c6c;
				}

				image {
					width: 44rpx;
					height: 44rpx;
				}

				.a {
					justify-content: flex-end !important;
				}
			}
		}

		.tips {
			width: 100%;
			padding: 20rpx 24rpx;

			text {
				color: #ff0000;
			}
		}

		&-min {
			width: 100%;
			padding: 30rpx 24rpx;
			box-sizing: border-box;
			background-color: #ffffff;

			&-title {
				text {
					font-size: 30rpx;
					color: #333333;
					margin-bottom: 12rpx;
				}
			}

			&-text {
				textarea {
					width: 100%;
					color: #cccccc;
				}
			}

			&-upload {
				image {
					width: 136rpx;
					height: 136rpx;
				}
			}
		}

		&-bto {
			width: 100%;
			padding: 30rpx 24rpx;
			box-sizing: border-box;
			margin: 24rpx 0;
			background-color: #ffffff;

			.stepbox {
				padding: 40rpx;
				box-sizing: border-box;

				&-big {
					padding: 0 70rpx 60rpx 30rpx;
					box-sizing: border-box;

					image {
						width: 100rpx;
						height: 100rpx;
						margin-right: 30rpx;
					}

					&-word {
						text:nth-of-type(1) {
							font-size: 30rpx;
							font-weight: 500;
							color: #333333;

							text {
								font-size: 26rpx;
								margin-left: 20rpx;
							}
						}

						text:nth-of-type(2) {
							font-size: 30rpx;
							font-weight: 500;
							color: #999999;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}

	.footer {
		width: 100%;
		height: 134rpx;
		background-color: #ffffff;
		margin-top: 20rpx;

		text {
			width: 702rpx;
			height: 86rpx;
			border-radius: 2em;
			background-color: #fed52b;
			font-size: 34rpx;
			color: #333333;
		}
	}
}
</style>